// 成绩录入

/* 1-查询成绩
1 - 打开页面的调用一个函数 发送请求 获取数据  渲染页面
2- 修改成绩 
1- 双击 单元格 开始修改
   1 找准元素 score类 再去绑定点击事件 有些元素 不需要 双击事件
2 双击事件触发了
3 控制单元格 对应的input 标签显示即可
4 控制input 标签 里面的value值等于单元格里面的内容
5 控制 被点击的input标签 获得焦点！！！ focus

3 失去焦点 结束修改
1 给input 标签绑定 失去焦点事件 （不能使用事件委托 因为只有表单标签存在失去焦点事件）
2 获取输入框里面的内容 拼接成参数 发送给后端 完成编辑
3 后端响应 编辑成功
   1 弹出一下友情提示
   2 重新获取最新的数据



*/

// 获取元素--为了拿到页面的渲染数据
const tbody = document.querySelector('tbody');


// 发送请求 获取成绩 数据 渲染页面
function getScoreList() {
    axios.get("/score/list").then((result) => {
        // console.log(result);
        // 判断业务码是否正确
        if (result.data.code === 0) {
            // console.log(result.data.data);
            // 拿对象
            const obj = result.data.data
            // 遍历对象forin    生成HTML标签
            let html = ""
            for (const key in obj) {
                // key =属性名
                // obj[key]=属性值
                // 根据成绩 数组来动态生成 多个tr标签
                const scoreHTML = obj[key].score.reduce((h, v, i) => {
                    return h += `
                    <td class="score">${v}   <input type="text" data-batch="${i + 1}" data-id=${key} >   </td>`
                }, "")
                // 拼接前面的id 姓名
                html += `
                <tr>
                <th scope="row">${key}</th>
                <td>${obj[key].name}</td>  ${scoreHTML}</tr>`
            }
            // 渲染页面出来
            tbody.innerHTML = html
            // 获取tbody里面的所有的input 遍历的方式来绑定  生成的页面拿数据一定能拿到
            const inputs = document.querySelectorAll('tbody input');
            // 遍历循环
            inputs.forEach((input) => {
                // 绑定失去焦点事件
                input.addEventListener('blur', function (e) {
                    // 准备接口需要的数据
                    const data = {
                        // 学员id
                        "stu_id": input.dataset.id,
                        //  成绩的次数
                        "batch": input.dataset.batch,
                        // 分数
                        "score": input.value,
                    }
                    // 发送给后端 完成修改
                    axios.post("/score/entry", data).then((result) => {
                        // 判断一下请求状态是否成功
                        if (result.data.code === 0) {
                            // 提示一下
                            toastr.success(result.data.message)
                        }
                    })
                })
            })
        }
    })
}
// 发送请求 获取成绩数据  渲染页面
getScoreList();

// 给分数 单元格绑定点击事件
tbody.addEventListener('dblclick', function (e) {
    const dom = e.target
    // 判断是否是td以及满足是分数的元素，是才继续
    if (dom.nodeName === "TD" && dom.classList.contains("score")) {
        // console.log("可以修改");
        // 要拿里面的input
        const input = dom.querySelector('input');
        // 显示文本框--可以录入数据
        input.style.display = "block"
        // 设置输入框input的value值等于单元格里面的文本  HTML  Text
        input.value = dom.innerText
        // 获得焦点
        input.focus()
    }
})